<template>
  <div>
    <div id="cesiumContainer"></div>
    <!-- <div class="btn-app"></div> -->
    <div class="btn-toolbar">
      <div id="toolbar" class="toolbar">
        <a id="btn-layer-manager" class="btn btn-inverse"
           data-toggle="dropdown" title="图层列表" aria-expanded="true"
           @click="addLayer">
          <span class="iconfont icon-layer" style="font-size:16px;"></span>
          <div class="dropdown-container dropdown-visiable" id="layer-manager-dropdown"
               style="min-width:260px;text-align:left;padding:8px"  v-if="isVisiable">
            <div id="layerTree" class="treeview">
              <el-tree
                :data="treeData"
                :props="treeProps"
                node-key="id"
                draggable
                show-checkbox>
              </el-tree>
            </div>
          </div>
        </a>
        <a class="btn btn-inverse" style="padding:10px 0px;">
          <span style="border-left:1px solid #dddddd;"></span>
        </a>
        <a id="btn-expand" class="btn btn-inverse" v-if="isBtnGroupExpand" title="展开" @click="fold">
          <span class="iconfont icon-toolbar_expand"></span>
        </a>
        <div id="btn-group" class="btn-group" v-if="!isBtnGroupExpand">
          <a id="btn-add-layer" class="btn btn-inverse" title="添加图层" aria-expanded="false">
            <span class="iconfont icon-toolbar-add_layer"></span>
          </a>
          <a data-toggle="dropdown" id="btn-base-layer" class="btn btn-inverse" title="底图" aria-expanded="false">
            <span class="iconfont icon-earth"></span>
          </a>
          <a data-toggle="dropdown" id="btn-setting" class="btn btn-inverse" title="场景">
            <span class="iconfont icon-toolbar-setting"></span>
          </a>
          <a class="btn btn-inverse" style="padding:10px 0px;">
            <span style="border-left:1px solid #dddddd;"></span>
          </a>
          <a data-toggle="dropdown" id="btn-clip" class="btn btn-inverse" title="裁剪">
            <span class="iconfont icon-toolbar-clip"></span>
          </a>
          <a data-toggle="dropdown" id="btn-terrain" class="btn btn-inverse" title="地形">
            <span class="iconfont icon-toolbar-terrain"></span>
          </a>
          <a data-toggle="dropdown" id="btn-analysis" class="btn btn-inverse" title="三维分析">
            <span class="iconfont icon-toolbar-analysis"></span>
          </a>
          <a data-toggle="dropdown" id="btn-measure" class="btn btn-inverse" title="量算">
            <span class="iconfont icon-toolbar-setting"></span>
          </a>
          <a class="btn btn-inverse" style="padding:10px 0px;">
            <span style="border-left:1px solid #dddddd;"></span>
          </a>
          <a id="btn-edit" class="btn btn-inverse" title="编辑">
            <span class="iconfont icon-toolbar-online-edit"></span>
          </a>
          <a id="btn-fold" class="btn btn-inverse" title="收起" @click="fold">
            <span class="iconfont icon-toolbar-fold"></span>
          </a>
        </div>
      </div>
      <div class="toolbar-content-container">
        <div class="toolbar-content-wrapper-inactive"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SuperMapCesiumContainer',
  props: {
    msg: String
  },
  mounted () {
    /* eslint-disable */
    var viewer = new Cesium.Viewer("cesiumContainer", {
      cesiumLogo: false
    })
    viewer._cesiumWidget._creditContainer.style.display = "none"

    viewer.imageryLayers.addImageryProvider(new Cesium.BingMaps)
    /* eslint-enable */
  },
  data () {
    return {
      isVisiable: false,
      isBtnGroupExpand: false,
      treeData: [
        {
          id: 1,
          label: '图层目录',
          children: [
            {
              id: 2,
              label: 'DEM图层'
            },
            {
              id: 3,
              label: 'S3M图层'
            }
          ]
        }
      ],
      treeProps: [
        {
          children: 'children',
          label: 'label'
        }
      ]
    }
  },
  methods: {
    handleCheckChange (data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    addLayer () {
      // 1.弹出dialog测试
      // alert('click ok')
      this.isVisiable = !this.isVisiable
    },
    fold () {
      this.isBtnGroupExpand = !this.isBtnGroupExpand
    }
  }
}
</script>

<style lang="less" scoped>
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
  font-size: 10pt;
  background: #000;
  color: #eee;
}

.btn-toolbar {
  position: absolute;
  left: 0px;
  top: 0px;
  margin-left: -5px;
  z-index: 1;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
  cursor: pointer;
}

.btn:hover {
  outline: 1px;
  border-color: #c0baba;
}

.btn-inverse {
  color: #2ec5ad;
  background-color: rgba(38, 38, 38, 0.75);
  vertical-align: middle;
}

.btn-inverse:hover {
  background: #2c3e50;
  color: #fff;
}

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

#toolbar {
  margin: 5px 5px 5px 8px;
}

#toolbar a {
  padding: 10px 12px;
  background-color: rgba(38, 38, 38, 0.75);
}

#toolbar a:hover {
  cursor: pointer;
}

// 设置底图
#btn-base-layer > .drop-down-container {
  padding: 5px 10px;
}

.dropdown-container {
  display: block;
  position: absolute;
  top: 100%;
  box-sizing: border-box;
  left: 0;
  border: 1px solid #526f82;
  margin: 9px;
  color: white;
  background-color: rgba(38, 38, 38, 0.75);
}

</style>
